<template>
	<div class="system-user-dialog-container">
		<el-dialog :close-on-click-modal="false" title="设备管理" draggable v-model="dialogVisible">
			<deiv class="condition-search">
				<div class="search-column" style="width: 200px">
					<el-select placeholder="请选择" v-model="searchForm.productKey">
						<el-option v-for="(item, index) in productData" :label="item.name" :value="item.productKey" :key="index"></el-option>
					</el-select>
				</div>
				<div class="search-column">
					<el-input placeholder="请输入设备名称" v-model="searchForm.deviceName"></el-input>
				</div>
				<div class="search-column">
					<el-button icon="Search" type="primary" @click="searchData">{{ $t('common.queryBtn') }}</el-button>
					<el-button icon="Refresh" @click="resetForm">{{ $t('common.resetBtn') }}</el-button>
				</div>
			</deiv>
			<avue-crud
				ref="crud"
				v-model="form"
				:page="page"
				:data="tableData"
				:table-loading="tableLoading"
				:option="tableOption"
				@search-change="searchChange"
				@size-change="sizeChange"
				@current-change="currentChange"
				@selection-change="selectionChange"
			>
			</avue-crud>
			<template #footer>
				<div class="dialog-footer">
					<el-button type="primary" @click="submitBindData">确定</el-button>
					<el-button @click="dialogVisible = false"> 取消 </el-button>
				</div>
			</template>
		</el-dialog>
	</div>
</template>

<script setup lang="ts">
import { tableOption } from './crud/device-add.js';
import { unbindDevList, bindDevData, productList } from '/@/api/basiciot/iconfiguration/list';

import { useMessage, useMessageBox } from '/@/hooks/message';

const emit = defineEmits(['updateList']);

const tableLoading = ref(false);
const tableData = ref([]);
const dialogVisible = ref(false);
const form = reactive({});
const page = reactive({
	total: 0, // 总页数
	currentPage: 1, // 当前页数
	pageSize: 10, // 每页显示多少条
});
const searchForm = reactive({
	productKey: '',
	deviceName: '',
});
const devIds = ref([]);
const iconfigurationId = ref();
const productData: any = ref([]);

const getList = (page: object, params?: object) => {
	tableLoading.value = true;
	unbindDevList(
		Object.assign(
			{
				current: page.currentPage,
				size: page.pageSize,
				id: iconfigurationId.value,
			},
			params
		)
	)
		.then((res: any) => {
			tableData.value = res.data.records || [];
			page.total = res.data.total;
			tableLoading.value = false;
		})
		.catch(() => {
			tableLoading.value = false;
		});
};
const searchData = () => {
	page.currentPage = 1;
	getList(page, searchForm);
};
const searchChange = function (form: object, done: any) {
	page.currentPage = 1;
	getList(page, form);
	done();
};
const sizeChange = function (pageSize: number) {
	page.pageSize = pageSize;
	getList(page, searchForm);
};
const currentChange = function (current: number) {
	page.currentPage = current;
	getList(page, searchForm);
};
const selectionChange = (list: any) => {
	devIds.value =
		list &&
		list
			.map((obj: any) => {
				return obj.unitNo;
			})
			.join(',')
			.split(',');
};
const submitBindData = () => {
	tableLoading.value = true;
	bindDevData({ scadaId: iconfigurationId.value, deviceIds: devIds.value })
		.then((res) => {
			if (res.ok) {
				useMessage().success('设备关联成功');
				dialogVisible.value = false;
				emit?.('updateList');
			} else {
				useMessage().warning('设备关联失败');
			}
			tableLoading.value = false;
		})
		.catch((err) => {
			useMessage().success('设备关联失败');
		});
};

const resetForm = () => {
	searchForm.productKey = '';
	searchForm.deviceName = '';
};

// 打开弹窗
const openDialog = async (row: any) => {
	dialogVisible.value = true;
	iconfigurationId.value = row;
	resetForm();
	getList(page);
	// 重置表单数据
	nextTick(() => {
		productList({
			current: 1,
			size: 1000,
		}).then((res) => {
			productData.value = res.data.records || [];
		});
	});
};
// 暴露变量
defineExpose({
	openDialog,
});
</script>
<style lang="scss" scoped>
.condition-search {
	display: flex;
	margin-bottom: 10px;
	.search-column {
		// flex: 1;
		margin-right: 10px;
	}
}
</style>
